<template>
	<div class="memorandum-edit max_W">
		<div class="memorandum-edit-h clear">
			<div class="memorandum-edit-h-l fl">
				<el-date-picker
					v-model="dateTime"
					type="date"
					format="MM-dd"
					:picker-options='pickerOptions'
					value-format="yyyy-MM-dd"
					placeholder="选择日期时间">
				</el-date-picker>
				<!-- <el-time-select
				  v-model="timeValue"
				  :editable="false"
				  clear-icon="el-icon-circle-close"
				  prefix-icon="el-icon-arrow-down"
				  :picker-options="{
				    start: '00:00',
				    step: '00:30',
				    end: '23:00'
				  }"
				  placeholder="选择时间">
				</el-time-select> -->
				<el-time-picker
					class="time-picker"
					v-model="timeValue"
					type="date"	
					 value-format="HH:mm" format="HH:mm"
					:picker-options='pickerOptions'
					placeholder="选择时间">
				</el-time-picker>
			</div>
			<div class="memorandum-edit-h-r fr">
				<span class="tagging-n" v-if="sign == false" @click="getSign">标记 <i class="el-icon-star-on"></i></span>
				<span class="tagging-y" v-if="sign == true" @click="getSign">标记 <i class="el-icon-star-on"></i></span>

				<el-button v-preventReClick type="danger" @click="removeDate(memoid)">删除</el-button>
				<el-button v-preventReClick type="primary" @click="addMemorandum">保存</el-button>
				<el-button type="primary" plain @click="goBack">取消</el-button>
			</div>
		</div>
		<!--  -->
		<div class="memorandum-rich">
	<!-- 		<vue-editor v-model="content" 
			@imageAdded="handleImageAdded"
			:editorToolbar="customToolbar"
			placeholder="请输入内容">
			</vue-editor>
			<span class="txt-length"><i>{{textLength}}</i>/1000</span> -->
			<Ueditor  v-model="content" :writeMsg="content"   
			id="resolv2" :config="config1"  ref="resolv2" ></Ueditor>
		</div>
	</div>
</template>

<script>
	import { VueEditor } from 'vue2-editor';
	import Ueditor from '@/components/common/Ueditor.vue';
	export default{
		components: { Ueditor},
		data(){
			return {
				timeValue: '',
				content: '',
				customToolbar: [
					[{'align':''},{'align':'center'},{'align':'right'}],
					[{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
					[{'background':[]},{'color':[]}],
					['link',"code-block"],
					['strike'],
					['clean'],
				],
				memoid: '',
				sign: false,
				is_sign: 0,
				isDisable: false,
				dateTime: '',
				pickerOptions: {
					disabledDate:(time) => {
						return time.getTime() < Date.now() - 8.64e7;
					}
				},
				textLength: 0,
				textBol: false,

		        config1: {
		        	zIndex: 3,
		        	textIndent: 0,
		        	maximumWords: 1000,
		        	elementPathEnabled: false,/*元素路径*/
		        	enableAutoSave: false,
					autoHeightEnabled: false,
					autoFloatEnabled: false,//不允许滚动时固定在顶部
					initialContent:'请输入内容...',   //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
					autoClearinitialContent:true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
					initialFrameWidth: '100%',
					initialFrameHeight: 500,
					serverUrl: this.BASE_URL+"/static/_/UEditor/1.4.3//php/controller.php?action=uploadimage",
					BaseUrl: this.BASE_URL,
					UEDITOR_HOME_URL: process.env.BASE_URL ? process.env.BASE_URL + 'ueditor/' : '/static/ueditor/',
					toolbars: [
						['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'pasteplain',  'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc','fullscreen', 'link', 'justifyleft', 'justifyright', 'justifycenter', 'lineheight', 'fontfamily', 'fontsize', 'undo', 'redo']
					]
		        },
			}
		},
		created() {
  
		},
		mounted() {
		    this.$nextTick(function () {
		         // this.calcVolume()
		        this.dateTime = this.dateTime2
		        this.getLookup()
		     })
		    
		},
		computed: {
			dateTime2: ()=>{
				const now = new Date()
				let year = now.getFullYear()
				let month = now.getMonth() + 1;
				let date =  now.getDate()
				const fillZero = value => (value < 10 ? `0${value}` : value)
				date = fillZero(date)

				let myTime = `${year}-${month}-${date}` 
				return myTime
			}
		},

		methods: {

			getLookup(){
				let success = (res=>{
					this.dateTime = (res.data.memo_time).substring(0,10)
					this.timeValue = (res.data.memo_time).substring(11,16);
					this.is_sign = res.data.is_sign;
					this.content = res.data.content
					this.memoid = res.data.id

					this.is_sign === 1 ? this.sign = true : this.sign = false
				})

				this.$ajax({
					url: 'api/memo/memo',
					method: 'get',
					params: {id: this.$route.query.id},
					func: {success: success}
				})
			},
			getSign(){

				(this.sign = !this.sign) == false ? this.is_sign = 0 : this.is_sign = 1
			},
			addMemorandum(){


				// 验证数据
				if (this.timeValue === '') {
					this.$message.warning('请输入时间');
					return
				}
				if (this.content === '') {
					this.$message.warning('请输入内容');
					return
				}

				let success = ( res =>{
					this.$message.success(res.msg)
					setTimeout(() => {
						this.$router.push({path: '/memorandum'})  
					}, 1000)
				});

				if (this.$refs.resolv2.getContentTxt().length > this.config1.maximumWords) {
					return this.$message.error('字数超出最大允许值，服务器可能拒绝保存！')
				}

				this.$ajax({
					url: 'api/memo/memo',
					method: 'put',
					data: {
						id: this.$route.query.id,
						content: this.content,
						is_sign: this.is_sign,
						memo_time: `${this.dateTime } ${this.timeValue}`
					},
					func: {success: success}
				})
			},
			removeDate(id){
				this.$confirm('是否删除该记录?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					
					let success = (res=>{
						this.$message.success(res.msg)
						this.$router.back(-1)
					})
					this.$ajax({
						url: 'api/memo/memo',
						method: 'delete',
						params: { id: id},
						func: {success:success}
					})
				}).catch(() => {});
			},
			goBack(){
				this.$router.back(-1)
			},
			handleImageAdded:function(file,Editor,cursorLocation){
			            //上传图片操作
			            //把获取到的图片url 插入到鼠标所在位置 回显图片
			            console.info(file,Editor,cursorLocation)
			     Editor.insertEmbed(cursorLocation, 'image', url);
			}
		}
	}
</script>

<style lang="scss">
	.memorandum-edit{
		min-height: 68vh;
		padding: 40px;
		background: #fff;
	}
	.memorandum-edit-h{
		border-bottom: 1px solid #EBEBEB;
		padding: 0 5px 20px 5px;
		margin-bottom: 20px;
	}
	.memorandum-edit-h-l{
		font-family: MicrosoftYaHei-Bold;
		font-size: 26px;
		color: #2AB4E6;
		> .el-input{
			margin-left: 20px;
		}
		.el-input__prefix{
			left: 70px;
			color: #2AB4E6;
		}
		.el-input__inner{
			font-family: MicrosoftYaHei-Bold;
			font-size: 26px;
			color: #2AB4E6;
			padding: 0;
			border: 0;
			background: none;
			height: 30px;
			line-height: 30px;
			&::-webkit-input-placeholder { 
			    color: #2AB4E6;
			}
			&:-moz-placeholder { 
			   color: #2AB4E6;
			}
			&::-moz-placeholder { 
			   color: #2AB4E6;
			}
			&:-ms-input-placeholder {
			   color: #2AB4E6;
			}
		}
		.el-input__suffix,
		.el-icon-date{
			display: none;
		}
		.el-date-editor--date{
			margin-left: 0;
			width: 80px;
		}
	}

	.memorandum-edit-h-r{
		.el-select{
			width: 100px;
			margin-right: 20px;
			.el-input__inner{
				height: 30px;
				line-height: 30px;
			}
			.el-input__icon{
				line-height: 30px;
			}
		}
		>span{
			font-size: 12px;
			color: #666666;
			margin-right: 50px;
			cursor: pointer;
			>i{
				font-size: 18px;
			}
		}
		.tagging-y{
			>i{
				color: #FFDA31;
			}
		}
		button{
			border: 0;
			padding: 0;
			width: 82px;
			height: 30px;
			line-height: 30px;
			text-align: center;
		}
	}

	.memorandum-rich{
		// height: calc(100% - 70px);
		.ql-editor {
		    min-height: 500px;
		}
	}
</style>